import React from 'react';
import { View, TouchableHighlight, StyleSheet, Dimensions } from 'react-native';
import PropTypes from 'prop-types';
import Color from '../../config/theme/standard/color';
import ModalBox from '../../components/modalbox/ModalBox';
import Label from '../label/index';
import Sudoku from '../sudoku/index';

export default class ActionSheet extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      isWideScreen: false // 鸿蒙适配是否宽屏
    };
  }

  componentDidMount() {
    // 适配鸿蒙折叠屏动态更新组件
    Dimensions.addEventListener('change', () => {
      const screenWidth = Dimensions.get('window').width;
      this.setState({
        isWideScreen: screenWidth > 500 && screenWidth < 800
      })
    })
  }

  _open = () => {
    this.modalbox.open()
  }

  _close = () => {
    this.modalbox.close()
  }

  _confirm = (data) => {
    const { callback } = this.props;
    if (callback) {
      callback(data);
    }
    this._close();
  }

  render() {
    const { config, dataSource, type, backdropPress } = this.props;
    const sWidth = Dimensions.get('window').width;
    let message = '';//标题文本
    let messageDes = ''; //标题描述
    let messageStyle = {}; //标题样式
    let type1content = [];
    let type2content = null;
    let cancelBtn = null;
    let titleCon = [styles.titleCon];
    if (type == 1 && config) {
      //type1
      message = config.message ? config.message : ''; //标题
      messageDes = config.messageDes ? config.messageDes : ''; //标题描述
      messageStyle = config.messageStyle ? config.messageStyle : {}; //标题样式
      let options = config.options ? config.options : []; //条目选项数组
      let optionsDesc = config.optionsDesc ? config.optionsDesc : []; //条目选项描述数组，与options一一对应
      let optionsStyle = config.optionsStyle ? config.optionsStyle : [];//条目选项文本样式数组，与options一一对应
      let cancelButtonIndex = config.cancelButtonIndex ? config.cancelButtonIndex : -1; //取消按钮index,新样式版本作废
      let destructiveButtonIndex = config.destructiveButtonIndex ? config.destructiveButtonIndex : -1;//删除按钮index,新样式版本作废
      //样式1内容区
      if (options.length > 0) {
        options.map((item, index) => {
          if (index == options.length - 1) {
            cancelBtn = (
              <TouchableHighlight
                key={'item-' + index}
                underlayColor={Color.icon.disable}
                onPress={() => this._confirm(index)}
              >
                <View style={styles.itemBtnCancel}>
                  <Label text={item} type={'form'} labelStyle={[styles.titleDesText, optionsStyle ? optionsStyle[index] : null]} />
                </View>
              </TouchableHighlight>
            );
          } else {
            type1content.push(
              <TouchableHighlight
                key={'item-' + index}
                style={{ width: '100%', justifyContent: 'center', alignItems: 'center' }}
                underlayColor={Color.icon.disable}
                onPress={() => this._confirm(index)}
              >
                <View style={[styles.itemBtn, { borderBottomWidth: index == options.length - 2 ? 0 : 1 }]}>
                  <Label text={item} type={'form'} labelStyle={[styles.btnText, optionsStyle ? optionsStyle[index] : null]} />
                  {optionsDesc.length > 0 && optionsDesc[index] ? <Label text={optionsDesc[index]} type={'percent'} labelStyle={styles.titleDesText} /> : null}
                </View>
              </TouchableHighlight>
            );
          }
        });
      }
    }

    //type2
    if (type == 2 && dataSource) {
      message = dataSource.message ? dataSource.message : '';
      messageStyle = dataSource.messageStyle ? dataSource.messageStyle : {};
      messageDes = dataSource.messageDes ? dataSource.messageDes : '';
      let data = dataSource.data ? dataSource.data : []; //宫格icon数据，格式通Sudoku宫格组件
      let columnCount = dataSource.columnCount ? dataSource.columnCount : 4;//图标列数
      let hasInnerBorder = dataSource.hasInnerBorder ? dataSource.hasInnerBorder : false;//是否有内边框
      let hasOuterBorder = dataSource.hasOuterBorder ? dataSource.hasOuterBorder : false;//是否有外边框
      let cancelBtnText = dataSource.cancelBtnText ? dataSource.cancelBtnText : '取消';//取消按钮文本
      let cancelBtnTextStyle = dataSource.cancelBtnTextStyle ? dataSource.cancelBtnTextStyle : {};//取消按钮文本样式

      //type2宫格图标区域
      type2content = (
        <View style={{ paddingBottom: 8 ,paddingTop:15}}>
          <Sudoku
            rowWidth={sWidth * 0.9}
            columnCount={columnCount}
            dataSource={data}
            imageStyle={{width: 36, height: 36}}
            hasDescription={false}
            onClick={(data) => this._confirm(data)}
            hasOuterBorder={hasOuterBorder}
            hasInnerBorder={hasInnerBorder}
          />
        </View>

      );
      //type2取消按钮
      cancelBtn = (
        <TouchableHighlight
          underlayColor={Color.icon.disable}
          onPress={() => this._close()}
        >
          <View style={styles.itemBtnCancel}>
            <Label text={cancelBtnText} type={'form'} labelStyle={[styles.titleDesText, cancelBtnTextStyle]} />
          </View>
        </TouchableHighlight>
      );
    }

    //公共标题区域
    let titleContent = null;
    if (message) {
      if(messageDes){
        titleCon.push({height:50,paddingBottom:5,paddingTop:12})
      }
      titleContent = (
        <View style={titleCon}>
          <Label text={message} type={'percent'} textAlign={'center'} numberOfLines={2} labelStyle={[styles.titleText, messageStyle]} />
          {messageDes ? <Label text={messageDes} type={'percent'} numberOfLines={1} labelStyle={styles.titleDesText} /> : null}
        </View>
      );
    }
    let content;
    if (type === 1) {
      content = type1content;
    } else if (type === 2) {
      content = type2content;
    }
    return (
      <ModalBox
        ref={(obj) => {
          this.modalbox = obj
        }}
        style={{ height: null, backgroundColor: 'transparent', alignItems: 'center' }}
        position={"bottom"}
        swipeToClose={false}
        backdropPressToClose={backdropPress}
        backdropOpacity={0.6}
      >
        <View>
          <View style={[styles.container, { width: sWidth * 0.9 }]}>
            {titleContent}
            {content}
          </View>
          <View style={[styles.containerCancel, { width: sWidth * 0.9 }]}>
            {cancelBtn}
          </View>
        </View>
      </ModalBox>
    );
  }
}
ActionSheet.propTypes = {
  type: PropTypes.number,//类型
  config: PropTypes.object,//type1数据源
  dataSource: PropTypes.object,//type2数据源
  backdropPress: PropTypes.bool,//点击遮罩是否关闭
  callback: PropTypes.func //点击回调函数
}
ActionSheet.defaultProps = {
  type: 1,
  backdropPress: true
}
const styles = StyleSheet.create({
  container: {
    backgroundColor: Color.white,
    borderRadius: 5,
    alignItems: 'center',
    justifyContent: 'center',
  },
  containerCancel: {
    marginTop: 12,
    marginBottom: 15,
    backgroundColor: Color.white,
    borderRadius: 5,
  },
  titleCon: {
    width: '100%',
    borderBottomColor: '#EEEEEE',
    borderBottomWidth: 0.5,
    alignItems: 'center',
    justifyContent: 'center',
    height: 41,
    paddingHorizontal: 5,
  },
  titleText: {
    color: '#666'
  },
  titleDesText: {
    color: '#666'
  },
  itemBtn: {
    width: '90%',
    borderBottomColor: '#F0F0F0',
    borderBottomWidth: 1,
    alignItems: 'center',
    justifyContent: 'center',
    height: 49,
  },
  btnText: {
    color: '#2E6CC6'
  },
  itemBtnCancel: {
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
    height: 49,
  }
});

